<template>
  <el-dialog
      v-model="dialogVisible"
      title="通知内容"
      width="30%"
  >
    <span>{{ details.sendInfo }}</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>

  <el-container>
    <el-header class="auditor_header">
      系统通知
    </el-header>
    <el-main>
      <el-table :data="informData" stripe border style="width: 100%" v-if="exist">
        <el-table-column  label="序号"  >
          <template #default="scope">
            {{number(scope.row.no)}}
          </template>
        </el-table-column>
        <el-table-column prop="sysInformsId" label="系统通知id" />
        <el-table-column prop="senderUsername" label="发送方手机号" />
        <el-table-column prop="receiverUsername" label="接收方手机号"/>
        <el-table-column prop="sendDate" label="发送时间"/>
        <el-table-column  label="操作"  >
          <template v-slot:default="scope">
            <el-button  type="primary" @click="detailedInform(scope.row.sysInformsId)"
            >查看详情</el-button>
            <el-popconfirm title="确定要删除吗?" @confirm="deleteInform(scope.row.sysInformsId)">
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <el-table :data="noData" stripe border style="width: 100%" v-if="!exist">
        <el-table-column  label="序号"  >
          <template #default="scope">
            {{number(scope.row.no)}}
          </template>
        </el-table-column>
        <el-table-column prop="sysInformsId" label="系统通知id" />
        <el-table-column prop="senderUsername" label="发送方手机号" />
        <el-table-column prop="receiverUsername" label="接收方手机号"/>
        <el-table-column prop="sendDate" label="发送时间"/>
        <el-table-column  label="操作"  >
          <template v-slot:default="scope">
            <el-button  type="primary" @click="detailedInform(scope.row.sysInformsId)"
            >查看详情</el-button>
            <el-popconfirm title="确定要删除吗?" @confirm="deleteInform(scope.row.sysInformsId)">
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <el-config-provider :locale="locale">
        <el-pagination
            v-model:currentPage="currentPage"
            v-model:page-size="pageSize"
            background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="changePage"
            @current-change="changePage"
        />
      </el-config-provider>

    </el-footer>
  </el-container>

</template>

<script>
import axios from "axios";
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import {ElMessage} from "element-plus";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "inform",
  mounted() {
    this.changePage()
  },
  data(){
    return{
      locale:zhCn,
      total: 1,
      currentPage: 1,
      pageSize: 10,
      dialogVisible: false,
      informData:[
      ],
      noData:[
      ],
      details:null,
      exist:true,
    }
  },
  methods:{
    number(a){
      return a+(this.currentPage-1)*this.pageSize
    },
    detailedInform:function (a){
      //查看详细的通知
      // eslint-disable-next-line no-unused-vars

      axios({
        method: 'post',
        url: '/api/sys_informs/getDeepInfo',
        data: {
          sysInformsId: a,
        },
      })
          .then((res)=>{
            if(res.data.success===true){//获取数据成功
              this.details=res.data.data
              //弹窗
              this.dialogVisible=true
            }else{
              // alert('该通知出错，可能已被删除')
              ElMessage.error('该通知出错，可能已被删除')
            }
          });
    },
    deleteInform:function (a){
      //删除通知
      axios({
        method: 'post',
        url: '/api/sys_informs/deleteInfo',
        data: {
          sysInformsId: a,
        },
      })
          .then((res)=>{
            if(res.data.success===true){//删除成功
              // alert("删除成功")
              ElMessage.success('删除成功')
              this.changePage()
            }else{
              // ElNotification({
              //   title: 'Error',
              //   message: 'This is a success message',
              //   offset: 100,
              // })
              ElMessage.error('删除失败')
              // alert('删除失败')
            }
          });
    },
    changePage:function (){
      let userjson=sessionStorage.getItem('user')
      let user=JSON.parse(userjson)
      axios({
        method: 'post',
        url: '/api/sys_informs/getSysInfos',
        data: {
          username: user.username,
        },
        params: {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
        },
      })
          .then((res)=>{

            this.total=res.data.data.total

            if(this.total===0){
              this.exist=false
            }
            else{
              this.exist=true
              this.informData=res.data.data.records

              for(var i=0;i<this.informData.length;i++){
                this.informData[i]['no']=i+1;
              }
            }
          });
    },

  }
}
</script>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}

.el-pagination{
  justify-content: center !important;
}
.auditor_header{
  height: 40px;
  text-align: left;
  line-height: 40px;
  font-size: 20px;
  font-weight: bolder;
  border-bottom: rgba(140, 147, 157, 0.38) 1px solid;
}
.el-container{
  height: 100%;
  width: 100%;
}
.el-footer{

  text-align: center;
  position: relative;
  bottom: 0px;

}

</style>